<template>
  <div class="addpage">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" center>
      <el-form :model="formData" :rules="rules" ref="pageFrom" label-width="80px">
        <el-form-item label="页面类型" prop="type">
          <el-select v-model="formData.type" v-selectLoadMore="selectLoadMore" clearable placeholder="请选择">
            <el-option
              v-for="item in filterForm.pageTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="页面标识">
          <el-select v-model="formData.alias" clearable placeholder="请选择">
            <el-option
              v-for="item in aliasList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="页面名称" prop="name">
          <el-input v-model="formData.name" autocomplete="off" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="页面属性">
          <el-radio-group v-model="formData.isSubject" @change="subjectChange">
            <el-radio :disabled="disabled" :label="0">非科目</el-radio>
            <el-radio :disabled="disabled" :label="1">科目</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.isSubject == 0" label="学段">
          <el-checkbox-group v-model="sectionListArr">
            <el-checkbox
              v-for="item in templateTagLevelDTOList"
              :label="item.tagEnumCode + '-' + item.tagEnumName"
              :key="item.tagEnumCode"
              :disabled="disabled">
              {{ item.tagEnumName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="formData.isSubject == 1" label="学段">
          <el-radio-group v-model="formData.section">
            <el-radio
              v-for="item in templateTagLevelDTOList"
              :label="item.tagEnumCode + '-' + item.tagEnumName"
              :key="item.tagEnumCode"
              @change="chooseSubject"
              :disabled="disabled">
              {{ item.tagEnumName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.isSubject == 1" label="科目">
          <el-radio-group v-model="formData.subject">
            <el-radio
              v-for="item in newSubjectArr"
              :label="item.tagEnumCode + '-' + item.tagEnumName"
              :key="item.tagEnumCode"
              style="margin-bottom: 20px"
              :disabled="disabled">
              {{ item.tagEnumName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePage" v-preventReClick>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTypeList, getTemplateTagLevel, savePages, getPageDetail } from "@/api/basisMG";
export default {
  props: {
    aDialogFormVisible: {
      type: Boolean,
      default: false,
    },
    pageFormData: {
      type: Object,
    },
  },
  // 防止el-button重复点击
  directives: {
    preventReClick: {
      // 指令的定义
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 2000);
          }
        });
      },
    },
  },
  data() {
    return {
      title: "",
      pageId: "",
      dialogFormVisible: false,
      aliasList: [],
      aliasformData: {
        type: 3,
        productType: "",
        pageNum: 1,
        pageSize: 100,
      },
      typeformData: {
        type: 1,
        productType: "",
        pageNum: 1,
        pageSize: 10,
      },
      formData: {
        id: "",
        name: "",
        type: "", // 页面类型
        alias: "", // 标识
        appType: "",
        isSubject: "", // 是否科目 0 非科目 1科目
        section: "", // 学段0001-小学
        subject: "", //科目 0001-语文,0002-数学
      },
      filterForm: {
        pageTypeList: [],
        section: [],
        pageNum: 1,
        pageSize: 10
      },
      templateTagLevelDTOList: [],
      subjectArr: [],
      sectionListArr: [],
      newSubjectArr: [],
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
      },
      disabled: false,
    };
  },
  methods: {
    // 下拉加载更多
    selectLoadMore () {
      this.typeformData.pageSize = this.typeformData.pageSize + 1;
      if (this.typeformData.pageSize > this.typeTotal) return
      this.getTypeList()
    },
    showEdit(row) {
      if (row.isSet === 0) {
        this.dialogFormVisible = true;
        this.title = "添加页面";
        this.formData.id = "";
        this.formData.name = "";
        this.formData.alias = "";
        this.formData.type = "";
        this.formData.isSubject = "";
        this.formData.section = "";
        this.formData.subject = "";
        this.disabled = false;
      } else {
        this.dialogFormVisible = true;
        this.title = "编辑页面";
        this.pageId = row.id;
        this.formData.id = row.id;
        if (row.status !== 1) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
        this.getPageDetail();
      }
    },
    //获取页面标识
    async getAliasList() {
      const res = await getTypeList(this.aliasformData);
      this.aliasList = res.data.content;
    },
    //获取页面类型
    async getTypeList () {
      const res = await getTypeList(this.typeformData);
      if (res.code === '200') {
        this.filterForm.pageTypeList = res.data.content;
        this.typeTotal = res.data.total;
      } else {
        this.filterForm.pageTypeList = [];
      }
    },
    //获取页面详情
    async getPageDetail() {
      const res = await getPageDetail({ pageId: this.pageId });
      if (res.code === '200') {
        this.formData.name = res.data.name;
        this.formData.alias = res.data.alias;
        this.formData.type = res.data.type;
        this.formData.isSubject = res.data.isSubject;
        this.formData.section = res.data.section;
        this.formData.subject = res.data.subject;
      } 
    },
    //获取学段和科目
    async getTemplateTagLevel() {
      const res = await getTemplateTagLevel({ id: "1361897479733286" });
      this.templateTagLevelDTOList = res.data.templateTagLevelDTOList;
      this.templateTagLevelDTOList.forEach((item) => {
        this.subjectArr.push(item.childrenDTOList);
      });
      this.newSubjectArr = this.subjectArr[0];
    },
    chooseSubject(e) {
      // this.getTemplateTagLevel();
      if (e == "0001-小学") {
        this.newSubjectArr = this.subjectArr[0];
      } else if (e == "0002-初中") {
        this.newSubjectArr = this.subjectArr[1];
      } else if (e == "0003-高中") {
        this.newSubjectArr = this.subjectArr[2];
      } else {
        this.newSubjectArr = this.subjectArr[3];
      }
    },
    savePage() {
      this.$refs["pageFrom"].validate(async (valid) => {
        if (valid) {
          this.formData.appType = this.pageFormData.appType;
          if (this.formData.isSubject == 0) {
            this.formData.section = this.sectionListArr.join(",");
          }
          const data = await savePages(this.formData);
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success(data.message);
          setTimeout(() => {
            this.dialogFormVisible = false;
            this.emitList();
          }, 500);
        } else {
          this.$message.warning("提交失败, 请检查内容是否填写正确!!!");
          return false;
        }
      });
    },
    subjectChange (val) {
      if (val === 0) {
        this.formData.section = "";
        this.formData.subject = "";
      }
    },
    emitList(e) {
      this.$emit("editorList", e);
    },
  },
  watch: {
    // 监听 aDialogFormVisible 改变
    aDialogFormVisible(oldVal, newVal) {
      this.dialogFormVisible = this.aDialogFormVisible;
    },
  },
  created() {
    this.getAliasList();
    this.getTemplateTagLevel();
    this.getTypeList();
  }
};
</script>
<style lang="scss"></style>
